<template>
	<view>
		<view class="cu-card shadow">
			<view class="cu-item">
				<u--form
					labelPosition="left"
					:model="expressModal"
					ref="uForm"
				>
					<u-form-item
						label="寄件地址："
						labelWidth="86px"
						prop="addressFrom"
						borderBottom
					>
						<view 
							class="flex"
							@click="getAddress('addressFrom')"
						>
							<u--input
								v-model="expressModal.addressFrom"
								border="surround"
								placeholder="请填写寄件地址"
								readonly
							/>
							<u-icon name="map-fill" :customStyle="{padding: '0 5px'}"></u-icon>
						</view>
					</u-form-item>
					<u-form-item
						label="收件地址："
						labelWidth="86px"
						prop="addressTo"
						borderBottom
					>
						<view 
							class="flex"
							@click="getAddress('addressTo')" 
						>
							<u-input
								border="surround"
								v-model="expressModal.addressTo"
								placeholder="请填写收件地址"
								readonly
							/>
							<u-icon name="map-fill" :customStyle="{padding: '0 5px'}"></u-icon>
						</view>
					</u-form-item>
					<u-form-item
						label="重量(KG)："
						labelWidth="86px"
						prop="weight"
						ref="item1"
					>
						<!-- <u--input
							v-model="expressModal.weight"
							type="number"
							border="surround"
							placeholder="请填写寄件重量"
							clearable
						></u--input> -->
						<u-number-box v-model="expressModal.weight"></u-number-box>
					</u-form-item>
					<u-form-item
						label="寄件时间："
						labelWidth="86px"
						prop="date"
						ref="item1"
					>
						<view @click="pickerDate">
							<u--input
								v-model="expressModal.date"
								border="surround"
								placeholder="请填写寄件时间"
								readonly
							></u--input>
						</view>
					</u-form-item>
				</u--form>
				<u--text type="info" iconStyle="margin-right: 5rpx;" prefixIcon="info-circle" text="温馨提示"></u--text>
				<u-gap height="5" bgColor="#fff"></u-gap>
				<u-line></u-line>
				<u-gap height="8" bgColor="#fff"></u-gap>
				<u--text type="info" size="12" text="1. 目前只支持部分常用的快递价格查询"></u--text>
				<u--text type="info" size="12" text="2. 数据来源网络,仅供参考"></u--text>
			</view>
			<view class="flex align-center bottom-btn">
				<view class="reset-btn shadow">
					<u-button shape="circle" text="重置" @click="reset"></u-button>
				</view>
				<view class="search-btn shadow">
					<u-button shape="circle" type="primary" text="查询" @click="submit"></u-button>
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="ad_wrap">
				<common-ad unitId="adunit-f105a266e64e000e" adType="video" />
			</view>
			<!-- #endif -->
		</view>
		
		<u-datetime-picker
			:show="showDatePicker"
			:minDate="Date.now()"
			:maxDate="maxDate"
			mode="datetime"
			@confirm="dateConfirm"
			@cancel="dateCancel"
		></u-datetime-picker>
		
		<cityPicker
			:column="3" 
			default-value="110101" 
			:mask-close-able="true" 
			@confirm="addressConfirm" 
			@cancel="addressCancel" 
			:visible="isShowAddressPicker"
		/>
		
		<!-- #ifdef MP-QQ -->
		<view class="ad_wrap">
			<common-ad unitId="039f6b1d4f58fa0bb8560be75f4b50d9" adType="banner" />
		</view>
		<!-- #endif -->
		<!-- <options-com @itemClick="otherAction" :list="[{title:'一转一',id:'onetoone'},{title:'增加货币',id:'add'}]"/> -->
	</view>
</template>

<script>
	import {expressCompanyPriceQuery} from "../../controller/request_ctrl";
	import {getStorage, setStorage} from "../../utils/storage_util";
	import {formatTime} from "../../utils/util";
	import optionsCom from "../../components/options.vue";
	import shareConfig from "../../utils/share_config";
	import { mapState, mapActions } from 'vuex';
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker';
	const expressData = uniCloud.importObject('getExpressData');
	
	let isShow = false;
	let isFirstEnter = true;
	export default {
		components:{
			optionsCom: optionsCom,
			cityPicker
		},
		data() {
			return {
				showDatePicker: false,
				isShowAddressPicker: false,
				expressModal: {
					addressFrom: '',
					addressTo: '',
					weight: 1,
					date: ''
				},
				maxDate: new Date(new Date().getFullYear() + 2 +'/1/1 0:0:0').getTime() - 1,
				rules: {
					'addressFrom': {
						type: 'string',
						required: true,
						message: '请填写寄件地址',
						trigger: ['blur', 'change']
					},
					'addressTo': {
						type: 'string',
						required: true,
						message: '请填写收件地址',
						trigger: ['blur', 'change']
					},
					'weight': {
						type: 'number',
						required: true,
						message: '请填写寄件重量',
						trigger: ['blur', 'change']
					},
					'date': {
						type: 'string',
						required: true,
						message: '请填写寄件时间',
						trigger: ['blur', 'change']
					}
				},
			}
		},
		onLoad() {

		},
		onReady() {
			this.addressType = '';
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		onShareAppMessage() {
			return shareConfig();
		},
		onShow() {
			if (this.expressItem) {
				this.expressModal.expressCompany = this.expressItem.exp_name;
				this.expressModal.expressCom = this.expressItem.com;
				this.setExpressItem(null);
			}
		},
		onHide() {

		},
		
		methods: {
			...mapActions(['setExpressPriceList']),
			getAddress(type) {
				this.addressType = type;
				this.isShowAddressPicker = true;
			},
			addressConfirm(val) {
				console.log('---- addressConfirm ----:', val);
				const { provinceName,cityName, areaName } = val;
				this.expressModal[this.addressType] = [provinceName,cityName, areaName].join('-');
				this.isShowAddressPicker = false;
			},
			addressCancel() {
				this.isShowAddressPicker = false;
			},
			dateConfirm(val) {
				console.log('---- dateConfirm ----:', val);
				// this.expressModal[this.addressType] = 
				this.expressModal.date = formatTime(new Date(val.value));
				this.showDatePicker = false;
			},
			dateCancel() {
				console.log('---- dateCancel ----:');
				this.showDatePicker = false;
			},
			pickerDate() {
				this.showDatePicker = true;
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					const {addressFrom, addressTo, weight, date} = this.expressModal;
					console.log('---- expressCompanyPriceQuery ----0', addressFrom, addressTo, weight, date);
					expressData.getPrice(addressFrom, addressTo, weight, date).then((res) => {
						console.log('---- expressData.getPrice ----:', res);
						const resObj = JSON.parse(res);
						if (resObj.status === "200" && resObj.data && resObj.data.length >0) {
							this.setExpressPriceList({item: resObj.data});
							uni.navigateTo({
								url: '/others/expressPriceList/expressPriceList'
							});
							return;
						} 
						uni.showToast({
							icon: 'none',
							title: resObj.message ? resObj.message : '查询失败，你稍后再试',
							duration: 2500
						})
					});
					// expressCompanyPriceQuery(addressFrom, addressTo, weight, date).then((res) => {
					// 	console.log('---- expressCompanyPriceQuery ----1', res);
					// 	return;
					// 	if (res.showapi_res_code === 0) {
					// 		if (!res.showapi_res_body.result || res.showapi_res_body.result.length === 0) {
					// 			uni.showToast({
					// 				icon: 'none',
					// 				title: res.showapi_res_body.msg,
					// 				duration: 2500
					// 			})
					// 			return;
					// 		}
					// 		this.setExpressPriceList({item: res.showapi_res_body.result});
					// 		uni.navigateTo({
					// 			url: '/pages/expressPriceList/expressPriceList'
					// 		});
					// 		return;	
					// 	}
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: res.showapi_res_error,
					// 		duration: 2500
					// 	})
					// })
				}).catch(errors => {
					console.log('---- this.$refs.uForm.validate ----', errors);
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '网络繁忙，请稍后再试',
					// 	duration: 2500
					// })
				})
			},
			reset() {
				this.expressModal = {
					addressFrom: '',
					addressTo: '',
					weight: 1,
					date: ''
				};
				this.$refs.uForm.resetFields();
			}
		}
	}
</script>

<style scoped lang="scss">
.bottom-btn{
	margin:0 30rpx;
}
.reset-btn{
	margin-right: 30rpx;
	flex: .5;
}
.search-btn{
	flex:1;
}
.picker-container{
	width: 100%;
	height: 100%;
}
</style>
